<template>
  <div class="chart-box2 meeting-room-time">
    <a-tabs
      v-model:activeKey="activeKey"
      :tabBarStyle="{
        color: 'rgba(255,255,255,1)',
      }"
      @change="handleTabChange"
    >
      <a-tab-pane v-for="item of roomList" :key="item.key" :tab="item.name" />
    </a-tabs>
    <div class="chart-content datav-scroller-bar" v-if="currentRoom">
      <a-row :gutter="[0, 24]">
        <a-col
          :span="4"
          v-for="(item, index) of currentRoom.timeList"
          :key="index"
          class="time-item"
          :class="{
            'border-right':
              !((index + 1) % 6) || index == currentRoom.timeList.length - 1,
          }"
          @click="handleRoomClick(item)"
        >
          <div class="time">{{ item.time }}</div>
          <div class="box" :class="{ 'in-use': item.inUse }"></div>
        </a-col>
      </a-row>
    </div>
  </div>
</template>

<script>
import {
  defineComponent,
  reactive,
  toRefs,
  watch,
  nextTick,
  onMounted,
  computed,
} from "vue";
import store from "../../../../store";
import common from "../../utils/common";
import moment from "moment";

export default defineComponent({
  name: "MeetingRoomTime",
  props: {
    roomList: {
      type: Array,
      default: () => [],
    },
  },
  setup(props, { emit }) {
    const state = reactive({
      activeKey: "",
    });

    const currentRoom = computed(() => {
      let result = {};
      if (state.activeKey) {
        result = props.roomList.find((item) => item.key == state.activeKey);
      }
      return result || {};
    });

    const handleTabChange = (key) => {
      emit("change", {
        type: "room",
        value: key,
      });
    };

    const handleRoomClick = (item) => {
      emit("change", {
        type: "time",
        value: item.inUse ? item : null,
      });
    };

    const timeFormat = "HH:mm";
    const getItemInUse = (time) => {
      if (currentRoom.value && currentRoom.value.key) {
        const { orderTimes } = currentRoom.value;
        for (let timeArr of orderTimes) {
          const inUse = moment(time, timeFormat).isBetween(
            moment(timeArr[0], timeFormat),
            moment(timeArr[1], timeFormat),
            "minutes",
            "[]"
          );
          if (inUse) {
            return true;
          }
        }
      }
      return false;
    };

    const getTimeList = (start, end) => {
      const result = [];
      for (let j = start; j <= end; j++) {
        let time1 = `${j < 10 ? "0" + j : j}:00`;
        let time2 = `${j < 10 ? "0" + j : j}:30`;
        result.push({
          time: time1,
          inUse: getItemInUse(time1),
        });
        if (j != end) {
          result.push({
            time: time2,
            inUse: getItemInUse(time2),
          });
        }
      }
      return result;
    };

    const init = () => {
      const { roomList } = props;
      if (roomList && roomList.length) {
        state.activeKey = roomList[0].key;
        roomList.forEach((item) => {
          const limit = item.book_time_limit.duration || [8, 18];
          item.timeList = getTimeList(limit[0], limit[1]);
        });
      }
    };

    init();

    watch(
      () => props.roomList,
      (list) => {
        init();
      }
    );

    return {
      currentRoom,
      ...toRefs(state),
      handleRoomClick,
      handleTabChange,
      getItemInUse,
    };
  },
});
</script>
<style lang="less" scoped>
@import "../../styles/common.less";
.meeting-room-time {
  width: 100%;
  height: calc(~"100% + 16px") !important;
  :deep(.ant-tabs-tab-prev-icon) {
    color: #fff;
  }
  :deep(.ant-tabs-tab-next-icon) {
    color: #fff;
  }
  :deep(.ant-tabs-bar) {
    border: none;
  }
  .chart-content {
    padding: 0 2rem;
    overflow: hidden auto;
    .time-item {
      height: 6rem;
      color: #fff;
      text-align: center;
      border-left: 1px solid rgba(255, 255, 255, 0.4);
      // border-right: 1px solid rgba(255, 255, 255, 0.2);
      display: flex;
      flex-direction: column;
      cursor: pointer;
      .time {
        flex: 1;
      }
      .box {
        height: 3rem;
        width: 100%;
        background: rgba(255, 255, 255, 0.2);
      }
      .in-use {
        background: @primaryOrange;
      }
    }
    .border-right {
      border-right: 1px solid rgba(255, 255, 255, 0.4);
    }
  }
}
</style>
